<!--
 * @Author: ylyu
 * @Date: 2024-02-22 20:20:49
 * @LastEditors: ylyu
 * @LastEditTime: 2024-02-23 21:12:24
 * @Description: 
-->
<script setup>
import { onMounted } from 'vue'
import useWebsiteStore from '@/store/websiteStore'
const websiteStore = useWebsiteStore()
onMounted(() => {
  websiteStore.init()
  console.log(websiteStore)
})
const removeItem = (url) => {
  websiteStore.deleteItem(url)
}
</script>

<template>
  <div class="list-wrapper">
    <p id="noData" v-if="!websiteStore.websites">暂无数据...</p>
    <ul v-else id="items" class="content">
      <li v-for="ws in websiteStore.websites" :key="ws.url">
        <div class="title-wrapper">
          <!-- <img :src="https://placekitten.com/60/60" alt="" /> -->
          <img :src="ws.screenshot" alt="" />
          <h3>{{ ws.title }}</h3>
        </div>
        <button @click="removeItem(ws.url)">X</button>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="css">
#noData {
  display: none;
}
ul {
  list-style: none;
  margin: 0;
  padding-right: 20px;
  padding-left: 0;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-wrapper {
  display: flex;
}
.title-wrapper h3 {
  padding-left: 10px;
}
.title-wrapper img {
  border-radius: 5px;
}
.list-wrapper {
  padding: 20px 20px 20px 0;
  box-sizing: border-box;
}
.content {
  width: 100%;
  padding: 0 20px;
}
</style>
